<template>
  <div class="home">
    <!-- <el-button @click="goHandle()" type="primary">主要按钮</el-button>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-switch v-model="value" active-color="#13ce66"> </el-switch> -->
    <!-- <div
        class="items"
        :class="index == current ? 'active' : ''"
        v-for="(item, index) in list"
        :key="index"
        @click="select(index)"
      >
        {{ item.title }}
      </div> -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>demo管理</el-breadcrumb-item>
      <el-breadcrumb-item>demo1</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane label="form11" name="f11">
          <form11></form11>
        </el-tab-pane>
        <el-tab-pane label="form10" name="f10">
          <form10></form10>
        </el-tab-pane>
        <el-tab-pane label="form9" name="f9">
          <form9></form9>
        </el-tab-pane>
        <el-tab-pane label="form8" name="f8">
          <form8></form8>
        </el-tab-pane>
        <el-tab-pane label="form6" name="f6">
          <form6></form6>
        </el-tab-pane>
        <el-tab-pane label="其他管理" name="three">
          {{ inputInfo.name }}{{ inputInfo.title }}
          <form3
            :show="ShowDia"
            @closeDia="closeHandle"
            @submitHandle="submitHandle"
          ></form3>
          <!-- <el-button @click="openDia()">打开弹窗</el-button>
            <el-button @click="openUrl()">跳转</el-button> -->
        </el-tab-pane>
        <el-tab-pane label="用户管理" name="first">
          <form1></form1>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">
          <form2></form2>
        </el-tab-pane>
        <el-tab-pane label="other" name="four">
          <Allselete></Allselete>
        </el-tab-pane>
        <el-tab-pane label="demo" name="five">
          <div>
            <el-button type="primary" size="mini" @click="handleDemo"
              >点击</el-button
            >
          </div>
        </el-tab-pane>
        <el-tab-pane label="tree" name="tree">
          <!-- <treeVue></treeVue> -->
        </el-tab-pane>
        <el-tab-pane label="sku" name="sku">
          已选择： {{ arrtextSelect }}
          <skuSeleteVue
            :attr="attr"
            @tagClick="tagClick"
            @ChangeAttr="ChangeAttr"
            @changeNum="changeNum"
          ></skuSeleteVue>
        </el-tab-pane>
        <!-- <el-button style="margin-top: 30px;" type="primary" @click="submitOrder"
            >提交订单</el-button
          > -->
      </el-tabs>
    </div>
    <div>
      <!-- <form-4></form-4> -->
      <!-- <form-5></form-5> -->
      <!-- <div>
          <el-button type="primary" @click="handleMe">点我</el-button>
        </div> -->
    </div>
  </div>
</template>

<script>
import form3 from '@/components/form3.vue'
import form1 from '@/components/form1.vue'
import form2 from '@/components/form2.vue'
import form5 from '@/components/form5.vue'
import Allselete from '@/components/Allselete.vue'
import skuSeleteVue from '@/components/skuSelete.vue'
import form6 from '@/components/form/form6.vue'
import form8 from '@/components/form/form8.vue'
import form9 from '@/components/form/form9.vue'
import form10 from '@/components/form/form10.vue'
import form11 from '@/components/form/f11.vue'

export default {
  name: 'Home',
  components: {
    form1,
    form2,
    form3,
    form5,
    Allselete,
    skuSeleteVue,
    form6,
    form8,
    form9,
    form10,
    form11,
  },
  data() {
    return {
      input: '',
      value: false,
      list: [
        { title: '切换1', id: 1 },
        { title: '切换2', id: 2 },
      ],
      current: 0,
      activeName: 'f11',
      ShowDia: false,
      inputInfo: {},
      personList: [],
      attr: {
        cartAttr: false,
        productAttr: [
          {
            productId: 87,
            attrValue: [
              {
                attr: '大',
              },
              {
                attr: '中',
              },
              {
                attr: '小',
              },
            ],
            type: 0,
            attrValues: ['大', '中', '小'],
            attrName: '尺寸',
          },
          {
            productId: 87,
            attrValue: [
              {
                attr: '黄色',
              },
              {
                attr: '红色',
              },
            ],
            type: 0,
            attrValues: ['黄色', '红色'],
            attrName: '颜色',
          },
        ],
        productSelect: {
          storeName: '测试商品',
          image:
            'https://laundress-production.oss-cn-shanghai.aliyuncs.com/ecomimage/content/2022/06/10/930eed37443944e58a87ec9657b49e1d8btty8mop2.jpg',
          price: '',
          cart_num: 1,
          stock: 0,
          unique: '',
        },
      },
      productValue: {
        '中,黄色': {
          id: 664,
          productId: 87,
          suk: '中,黄色',
          stock: 10,
          sales: 0,
          price: '17.00',
          image:
            'https://laundress-production.oss-cn-shanghai.aliyuncs.com/ecomimage/content/2022/06/10/930eed37443944e58a87ec9657b49e1d8btty8mop2.jpg',
          unique: '',
          cost: '10.00',
          barCode: '',
          otPrice: '5.00',
          weight: '0.00',
          volume: '0.00',
          brokerage: '0.00',
          brokerageTwo: '0.00',
          type: 0,
          quota: null,
          quotaShow: null,
          createTime: null,
          updateTime: null,
          attrValue: '{"尺寸":"中","颜色":"黄色"}',
          minPrice: null,
          checked: null,
          itemCode: '',
        },
        '大,红色': {
          id: 663,
          productId: 87,
          suk: '大,红色',
          stock: 8,
          sales: 0,
          price: '16.00',
          image:
            'https://laundress-production.oss-cn-shanghai.aliyuncs.com/ecomimage/content/2022/06/10/d63308496f8f45648409c7e905b8bf0bb2i0dfwkfn.jpg',
          unique: '',
          cost: '10.00',
          barCode: '',
          otPrice: '5.00',
          weight: '0.00',
          volume: '0.00',
          brokerage: '0.00',
          brokerageTwo: '0.00',
          type: 0,
          quota: null,
          quotaShow: null,
          createTime: null,
          updateTime: null,
          attrValue: '{"尺寸":"大","颜色":"红色"}',
          minPrice: null,
          checked: null,
          itemCode: '',
        },
        '小,红色': {
          id: 667,
          productId: 87,
          suk: '小,红色',
          stock: 7,
          sales: 0,
          price: '20.00',
          image:
            'https://laundress-production.oss-cn-shanghai.aliyuncs.com/ecomimage/content/2022/06/08/65905d05700b479dbe29ae60fd597a440nnoz157t3.jpg',
          unique: '',
          cost: '10.00',
          barCode: '',
          otPrice: '5.00',
          weight: '0.00',
          volume: '0.00',
          brokerage: '0.00',
          brokerageTwo: '0.00',
          type: 0,
          quota: null,
          quotaShow: null,
          createTime: null,
          updateTime: null,
          attrValue: '{"尺寸":"小","颜色":"红色"}',
          minPrice: null,
          checked: null,
          itemCode: '',
        },
        '中,红色': {
          id: 665,
          productId: 87,
          suk: '中,红色',
          stock: 6,
          sales: 0,
          price: '18.00',
          image:
            'https://laundress-production.oss-cn-shanghai.aliyuncs.com/ecomimage/content/2022/06/10/610a29454abf446a962ee2b4250e3c5co4j7g2qanu.jpg',
          unique: '',
          cost: '10.00',
          barCode: '',
          otPrice: '5.00',
          weight: '0.00',
          volume: '0.00',
          brokerage: '0.00',
          brokerageTwo: '0.00',
          type: 0,
          quota: null,
          quotaShow: null,
          createTime: null,
          updateTime: null,
          attrValue: '{"尺寸":"中","颜色":"红色"}',
          minPrice: null,
          checked: null,
          itemCode: '',
        },
        '小,黄色': {
          id: 666,
          productId: 87,
          suk: '小,黄色',
          stock: 5,
          sales: 0,
          price: '19.00',
          image:
            'https://laundress-production.oss-cn-shanghai.aliyuncs.com/ecomimage/content/2022/06/07/25a2b4acb0d54092b41c166d821d2950xafw2pgl5g.jpg',
          unique: '',
          cost: '10.00',
          barCode: '',
          otPrice: '5.00',
          weight: '0.00',
          volume: '0.00',
          brokerage: '0.00',
          brokerageTwo: '0.00',
          type: 0,
          quota: null,
          quotaShow: null,
          createTime: null,
          updateTime: null,
          attrValue: '{"尺寸":"小","颜色":"黄色"}',
          minPrice: null,
          checked: null,
          itemCode: '',
        },
        '大,黄色': {
          id: 662,
          productId: 87,
          suk: '大,黄色',
          stock: 4,
          sales: 0,
          price: '15.00',
          image:
            'https://laundress-production.oss-cn-shanghai.aliyuncs.com/ecomimage/content/2022/06/08/49f95b6767d84814bf73d20f94373c80rcxe7tefw0.jpg',
          unique: '',
          cost: '10.00',
          barCode: '',
          otPrice: '5.00',
          weight: '0.00',
          volume: '0.00',
          brokerage: '0.00',
          brokerageTwo: '0.00',
          type: 0,
          quota: null,
          quotaShow: null,
          createTime: null,
          updateTime: null,
          attrValue: '{"尺寸":"大","颜色":"黄色"}',
          minPrice: null,
          checked: null,
          itemCode: '',
        },
      },
      arrtextSelect: '',
    }
  },
  created() {
    const p1 = this.Promisemethodsone()
    const p2 = this.Promisemethodstwo()
    Promise.all([p1, p2]).then((res) => {
      console.log(res)
      this.personList = res.map((item) => item.name)
      this.handleMe()
    })
    // this.handlethree();
    this.sukMSelect()

    // console.log(
    //   this.$modademoEdit(
    //     e => {
    //       console.log(e);
    //     },
    //     null,
    //     true
    //   )
    // );
  },
  methods: {
    submitOrder() {
      // console.log(this.attr.productSelect);
      this.activeName = 'second'
    },
    tagClick(e) {
      console.log(e)
      this.attr.productAttr[e.idx1].index =
        this.attr.productAttr[e.idx1].attrValues[e.idx2]
    },
    // 属性变动赋值
    ChangeAttr(res) {
      console.log(res)
      let productSelect = this.productValue[res]
      this.attr.productSelect.image = productSelect.image
      this.attr.productSelect.price = productSelect.price
      this.attr.productSelect.stock = productSelect.stock
      this.attr.productSelect.unique = productSelect.id
      this.arrtextSelect = res
    },
    showSuk() {
      let arr = this.attr.productAttr.map((item) => {
        return item.index
      })
      this.ChangeAttr(arr.join(','))
    },
    sukMSelect() {
      this.attr.productAttr.forEach((item, index) => {
        item.index = item.attrValues[0]
      })
      this.showSuk()
    },
    changeNum(e) {
      this.attr.productSelect.cart_num = e
    },
    handleDemo() {
      let obj = {
        name: 'zs',
        age: 18,
      }
      this.demoEvent(
        obj,
        (res) => {
          console.log(res)
          this.$message.success(res.message)
        },
        (result) => {
          console.log(result)
          this.$message.error(result.message)
        }
      )
    },
    demoEvent(opt, cb, eb) {
      if (opt.name == 'zs') {
        cb({
          code: 200,
          message: '操作成功',
        })
      } else {
        eb({
          code: 500,
          message: '操作失败',
        })
      }
    },
    Promisemethodsone() {
      return new Promise((resolve, reject) => {
        let params = {
          name: 'ls',
          age: 20,
          sex: 0,
        }
        resolve(params)
      })
    },
    Promisemethodstwo() {
      return new Promise((resolve, reject) => {
        let params = {
          name: 'zs',
          age: 18,
          sex: 1,
        }
        resolve(params)
      })
    },

    handleMe() {
      this.PromiseHandle(2)
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
        .finally((res) => {
          // console.log("first");
        })
    },
    PromiseHandle(type) {
      return new Promise((resolve, reject) => {
        if (type == 1) {
          let obj = {
            message: '成功',
            code: 200,
          }
          return resolve(obj)
        } else if (type == 2) {
          let obj = {
            message: '失败',
            code: 500,
          }
          return reject(obj)
        } else if (type == 3) {
        }
      })
    },
    openUrl() {
      let url = 'https://www.baidu.com?a=1&b=2'
      window.open(url)
    },
    goHandle() {
      // this.$router.replace("/about");
      this.$message.success('123456')
    },
    openDia() {
      this.ShowDia = true
    },
    closeHandle(e) {
      this.ShowDia = e
    },
    submitHandle(e) {
      console.log(e)
      this.ShowDia = false
      this.inputInfo = e
    },
    // select(inx) {
    //   this.current = inx;
    // },
  },
}
</script>

<style lang="less">
.active {
  color: red;
  font-weight: bold;
}
.home {
  // display: flex;
  .items {
    margin-right: 20px;
  }
}
</style>
